<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>成果分类编辑 | {$system_name}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="{_ADMIN_STATIC_}/i/favicon.png">
    <link rel="stylesheet" href="{_ADMIN_STATIC_}/css/amazeui.min.css" />
    <link rel="stylesheet" href="{_ADMIN_STATIC_}/css/admin.css">
    <link rel="stylesheet" href="{_ADMIN_STATIC_}/css/app.css">
</head>

<body data-type="index">
    <!-- 头部导航栏 -->
    {include file='public/header'}
    <!-- 左侧侧边栏 -->
    {include file='public/side'}
    <!-- 中间内容开始 -->

    <!-- 标题 -->
    <div class="tpl-content-page-title">
        {$system_name} -- 成果分类编辑
    </div>
    <!-- 面包屑导航 -->
    <ol class="am-breadcrumb">
        <li><a href="{$index_home}" class="am-icon-home">成果管理首页</a></li>
        <li><a href="{$classify_home}">成果分类</a></li>
        <li>编辑成果分类</li>
    </ol>
    <!-- 提示信息 -->
    <div class="tpl-content-scope">
        <div class="tpl-portlet-components">

            <div class="am-form tpl-form-line-form am-form-group">
                <label for="table_name" class="am-u-sm-3 am-form-label">该分类生成的表名：</label>
                <div class="am-u-sm-9">
                    <input type="text" class="tpl-form-input" id="table_name" placeholder="该分类生成的表名"
                        value="{$table_name}">
                    <small>表名用于自动创建表的时候使用</small>
                </div>
            </div>

            <div class="am-form am-form-horizontal">
                <div style="margin-top: 70px;">

                    <button id="table_add_tr" type="button" class="am-btn am-btn-default am-btn-success">
                        <span class="am-icon-plus"></span>
                        新增一行
                    </button>

                    <button id="table_save" type="button" class="am-btn am-btn-default am-btn-success">
                        <span class="am-icon-plus"></span>
                        保存
                    </button>

                    <button id="table_create" type="button" class="am-btn am-btn-default am-btn-success">
                        <span class="am-icon-plus"></span>
                        创建数据表
                    </button>

                    <button id="table_clean" type="button" class="am-btn am-btn-default am-btn-danger">
                        <span class="am-icon-remove"></span>
                        清空数据
                    </button>

                    <button id="table_delete" type="button" class="am-btn am-btn-default am-btn-danger">
                        <span class="am-icon-remove"></span>
                        删除数据表
                    </button>

                    <button id="create_template" type="button" class="am-btn am-btn-default am-btn-success">
                        <span class="am-icon-remove"></span>
                        {$table_status | classify_edit_status}
                    </button>

                    <button id="del_template" type="button" class="am-btn am-btn-default am-btn-danger">
                        <span class="am-icon-remove"></span>
                        删除模板
                    </button>

                    <table class="am-table am-table-striped am-table-hover table-main">
                        <thead>
                            <tr>
                                <th style="width: 100px;">字段名</th>
                                <th style="width: 100px;">提示名</th>
                                <th style="width: 200px;">默认描述</th>
                                <th style="width: 100px;">字段类型</th>
                                <th style="width: 100px;">字段长度</th>
                                <th style="width: 100px;">操作</th>
                            </tr>
                        </thead>
                        <tbody id="tbody">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 隐藏数据 -->
    <input type="hidden" id="classify_type_list" value="{$classify_type_list}" />
    <input type="hidden" id="table_content" value="{$table_content}" />
    <!-- 中间内容结束 -->
    <!-- 底部 -->
    <!-- {include file="public/footer"} -->

    <script src="{_ADMIN_STATIC_}/lib/jquery/jquery.js"></script>
    <script src="{_ADMIN_STATIC_}/js/amazeui.min.js"></script>
    <script src="{_ADMIN_STATIC_}/js/app.js"></script>
    <script src="{_ADMIN_STATIC_}/lib/layer/layer.js"></script>
    <script>
        // 后端的分隔符
        var separator = '{$separator}';
        var separator_len = separator.length;
        // 获取字段类型
        var classify_type_list = ($('#classify_type_list').val() == '') ? '' : $.parseJSON($('#classify_type_list').val());
        // 获取表格内的数据
        var classify_table_content = ($('#table_content').val() == '') ? '' : $.parseJSON($('#table_content').val());
        var classify_table_content_len = ($('#table_content').val() == '') ? 0 : classify_table_content.cols.length;

        // 生成表内数据
        for (let index = 0; index < classify_table_content_len; index++) {
            add_tr(classify_table_content.cols[index],
                classify_table_content.names[index],
                classify_table_content.notes[index],
                classify_table_content.selects[index]
                , classify_table_content.lens[index],
                index + 1);
        }



        // 新增一行
        var table_add_tr = $('#table_add_tr');
        // 保存
        var table_save = $('#table_save');
        // 创建数据表
        var table_create = $('#table_create');
        // 清空数据
        var table_clean = $('#table_clean');
        // 删除数据表
        var table_delete = $('#table_delete');
        // 创建模板
        var create_template = $('#create_template');
        // 删除模板
        var del_template = $('#del_template');

        // 获取分类的状态
        var classify_flag = "{$classify_flag}";

        // 删除指定的一行
        if (classify_flag == '0' || classify_flag == '1') {
            function del_col(i) {
                $("#tr_" + i).remove();
            }
        }

        // 按钮功能状态调整
        if (classify_flag == '0') {
            table_create.attr({ "disabled": "disabled" });
            table_clean.attr({ "disabled": "disabled" });
            table_delete.attr({ "disabled": "disabled" });
            create_template.attr({ "disabled": "disabled" });
            del_template.attr({ "disabled": "disabled" });

            // 新增一行
            table_add_tr.on('click', function () {
                add_tr();
            })
            // 保存
            table_save.on('click', function () {
                save();
            })
        } else if (classify_flag == '1') {
            table_clean.attr({ "disabled": "disabled" });
            table_delete.attr({ "disabled": "disabled" });
            create_template.attr({ "disabled": "disabled" });
            del_template.attr({ "disabled": "disabled" });

            // 新增一行
            table_add_tr.on('click', function () {
                add_tr();
            })
            // 保存
            table_save.on('click', function () {
                save();
            })
            // 创建一张新表
            table_create.on('click', function () {
                layer.confirm('创建表之前，确认该数据已保存！！！', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    $.ajax({
                        url: "{:url('AchievementManage/classify_table_create')}",
                        type: "POST",
                        data: {
                            'cid': "{$id}",
                            'table_name': $("#table_name").val(),
                        },
                        dataType: "JSON",
                        success: function (res) {
                            // 返回结果处理
                            if (res.code == 0) {
                                return layer.msg(res.msg, { icon: 1, time: 900 }, function () {
                                    location.reload();
                                });
                            } else {
                                return layer.msg(res.msg, { icon: 2, time: 900 });
                            }
                        }
                    });
                }, function () {
                    layer.msg('请先保存数据后，再进行创建表的操作', {
                        time: 10000, //10s后自动关闭
                        btn: ['明白了', '知道了']
                    });
                });
            });

        } else if (classify_flag == '2') {
            table_add_tr.attr({ "disabled": "disabled" });
            table_save.attr({ "disabled": "disabled" });
            table_create.attr({ "disabled": "disabled" });

            // 清空数据
            table_clean.on('click', function () {
                layer.prompt({ title: '确定要清空该表数据吗，请输入[立即清空]', formType: 0 }, function (text, index) {
                    layer.close(index);
                    if (text != "立即清空") {
                        return layer.msg('口令输入错误，立即清空', { icon: 2, time: 1500 });
                    }

                    $.ajax({
                        url: "{:url('AchievementManage/classify_table_others_clear')}",
                        data: {
                            'cid': "{$id}",
                            'text': text
                        },
                        type: "POST",
                        dataType: "JSON",
                        success: function (res) {
                            // 返回结果处理
                            if (res.code == 0) {
                                return layer.msg(res.msg, { icon: 1, time: 900 }, function () {
                                    location.reload();
                                });
                            } else {
                                return layer.msg(res.msg, { icon: 2, time: 900 });
                            }
                        }
                    });

                });
            });
            // 删除收集表
            table_delete.on('click', function () {
                layer.prompt({ title: '确定要清空该表数据吗，请输入[立即删除]', formType: 0 }, function (text, index) {
                    layer.close(index);
                    if (text != "立即删除") {
                        return layer.msg('口令输入错误，立即删除', { icon: 2, time: 1500 });
                    }

                    $.ajax({
                        url: "{:url('AchievementManage/classify_table_others_drop')}",
                        data: {
                            'cid': "{$id}",
                            'text': text
                        },
                        type: "POST",
                        dataType: "JSON",
                        success: function (res) {
                            // 返回结果处理
                            if (res.code == 0) {
                                return layer.msg(res.msg, { icon: 1, time: 900 }, function () {
                                    location.reload();
                                });
                            } else {
                                return layer.msg(res.msg, { icon: 2, time: 900 });
                            }
                        }
                    });

                });
            });
            // 创建模板
            create_template.on('click', function () {
                $.ajax({
                    url: "{:url('AchievementManage/create_template')}",
                    data: {
                        'cid': "{$id}"
                    },
                    type: "POST",
                    dataType: "JSON",
                    success: function (res) {
                        // 返回结果处理
                        if (res.code == 0) {
                            return layer.msg(res.msg, { icon: 1, time: 900 }, function () {
                                location.reload();
                            });
                        } else {
                            return layer.msg(res.msg, { icon: 2, time: 900 });
                        }
                    }
                });
            });
            // 删除模板
            del_template.on('click', function () {
                $.ajax({
                    url: "{:url('AchievementManage/del_template')}",
                    data: {
                        'cid': "{$id}"
                    },
                    type: "POST",
                    dataType: "JSON",
                    success: function (res) {
                        // 返回结果处理
                        if (res.code == 0) {
                            return layer.msg(res.msg, { icon: 1, time: 900 }, function () {
                                location.reload();
                            });
                        } else {
                            return layer.msg(res.msg, { icon: 2, time: 900 });
                        }
                    }
                });
            });
        }



        // 保存当前数据
        function save() {
            var cols = get_cols();
            var names = get_names();
            var notes = get_notes();
            var selects = get_selects();
            var lens = get_lens();

            if (cols.length < 2 || names.length < 2 || notes.length < 1 || selects.length < 3 || lens.length < 2) {
                return layer.msg('至少两行数据', { icon: 5, time: 900 });
            }

            // 获取需要发送的所有数据
            var data = {
                'id': "{$id}",
                'table_name': $("#table_name").val(),
                'cols': get_cols(),
                'names': get_names(),
                'notes': get_notes(),
                'selects': get_selects(),
                'lens': get_lens(),
            };

            $.ajax({
                url: "{:url('AchievementManage/classify_edit')}",
                data: data,
                type: "POST",
                dataType: "JSON",
                success: function (res) {
                    // 返回结果处理
                    if (res.code == 0) {
                        return layer.msg(res.msg, { icon: 1, time: 900 }, function () {
                            location.reload();
                        });
                    } else {
                        return layer.msg(res.msg, { icon: 2, time: 900 });
                    }
                }
            });

        }

        // tr 中 下拉列表内容
        function select_row(select, select_value) {
            var i = 1;
            classify_type_list.forEach(element => {
                var option = document.createElement("option");
                option.setAttribute('value', element.value);
                if (select_value == i)
                    option.setAttribute('selected', 'selected');
                option.innerHTML = element.name;
                select.insertBefore(option, null);
                i++;
            });
            return select;
        }

        // 创建 一行 tr
        function add_tr(col_value = '', name_value = '', note_value = '', select_value = 1, len_value = '', id = '') {

            var id = (id == '') ? (new Date()).valueOf() : id;
            var tr = document.createElement("tr");
            tr.setAttribute('id', 'tr_' + id);

            // 1.字段名
            var td1 = document.createElement("td");
            var input = document.createElement("input");
            input.setAttribute('type', 'text');
            input.setAttribute('name', 'cols[]');
            input.setAttribute('value', col_value);
            td1.insertBefore(input, null);
            tr.insertBefore(td1, null);

            // 2.提示名
            var td2 = document.createElement("td");
            var input = document.createElement("input");
            input.setAttribute('type', 'text');
            input.setAttribute('name', 'names[]');
            input.setAttribute('value', name_value);
            td2.insertBefore(input, null);
            tr.insertBefore(td2, null);

            // 3.默认描述
            var td3 = document.createElement("td");
            var textarea = document.createElement("textarea");
            textarea.setAttribute('rows', '1.5');
            textarea.setAttribute('name', 'notes[]');
            textarea.innerHTML = note_value;
            td3.insertBefore(textarea, null);
            tr.insertBefore(td3, null);

            // 4.字段类型
            var td4 = document.createElement("td");
            var select = document.createElement("select");
            select.setAttribute('name', 'selects[]');
            select_row(select, select_value);
            td4.insertBefore(select, null);
            tr.insertBefore(td4, null);

            // 5. 字段长度
            var td5 = document.createElement("td");
            var input = document.createElement("input");
            input.setAttribute('type', 'number');
            input.setAttribute('name', 'lens[]');
            input.setAttribute('value', len_value);
            td5.insertBefore(input, null);
            tr.insertBefore(td5, null);

            // 操作
            var td6 = document.createElement("td");

            var button = document.createElement("button");
            button.setAttribute('type', 'button');
            button.setAttribute('class', 'am-btn');
            button.setAttribute('style', 'background-color: red;color: white;');
            button.setAttribute('onclick', 'del_col(' + id + ')');

            var span1 = document.createElement("span");
            span1.setAttribute('class', 'am-icon-remove');
            var span2 = document.createElement("span");
            span2.innerHTML = '删除';

            button.insertBefore(span1, null);
            button.insertBefore(span2, null);
            td6.insertBefore(button, null);
            tr.insertBefore(td6, null);

            // 将 tr 放入 tbody 内
            var tbody = document.getElementById('tbody');
            tbody.insertBefore(tr, null);
        }

        // 1. 获取 cols 字段名的数据
        function get_cols() {
            var cols_arr = '';
            var cols = $("input[name='cols[]']").each(function () {
                cols_arr = cols_arr + $(this).val() + separator;
            });
            cols_arr = cols_arr.substring(0, cols_arr.length - separator_len);
            return cols_arr;
        }

        // 2. 获取 names 提示名的数据
        function get_names() {
            var names_arr = '';
            var names = $("input[name='names[]']").each(function () {
                names_arr = names_arr + $(this).val() + separator;
            });
            names_arr = names_arr.substring(0, names_arr.length - separator_len);
            return names_arr;
        }

        // 3. 获取 notes 默认描述的数据
        function get_notes() {
            var notes_arr = '';
            var notes = $("textarea[name='notes[]']").each(function () {
                notes_arr += (($(this).val() == '') ? '无' : $(this).val()) + separator;
            });
            notes_arr = notes_arr.substring(0, notes_arr.length - separator_len);
            return notes_arr;
        }

        // 4.  获取 selects 字段类型的数据
        function get_selects() {
            var selects_arr = '';
            var selects = $("select[name='selects[]']").each(function () {
                selects_arr += (($(this).val() == '') ? '无' : $(this).val()) + separator;
            });
            selects_arr = selects_arr.substring(0, selects_arr.length - separator_len);
            return selects_arr;
        }

        // 5. 获取 lens 字段长度的数据
        function get_lens() {
            var lens_arr = '';
            var lens = $("input[name='lens[]']").each(function () {
                lens_arr = lens_arr + $(this).val() + separator;
            });
            lens_arr = lens_arr.substring(0, lens_arr.length - separator_len);
            return lens_arr;
        }



        // 重定向
        function redirect_url(url) {
            window.location.href = url;
        }

    </script>
</body>

</html>